<!DOCTYPE html>
<!-- saved from url=(0063)https://netdisk.moyublog.com/code_demo/5ffb38989efbc/index.html -->
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <title>音乐播放器测试</title>
    <meta name="keywords" content="移动播放器">
    <meta name="description" content="移动播放器">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="icon" href="https://netdisk.moyublog.com/code_demo/5ffb38989efbc/favicon.ico" type="image/x-icon">
    <link rel="shortcut icon" href="https://netdisk.moyublog.com/code_demo/5ffb38989efbc/favicon.ico"
          type="image/x-icon">

    <!-- 字体文件 -->
    <link href="/static/music/css/font-awesome.css" rel="stylesheet">
    <!-- 背景css -->
    <link href="/static/music/css/bg.css" rel="stylesheet">
    <!-- 播放器css -->
    <link href="/static/music/css/fcmusic.css" rel="stylesheet">
    <!-- 仿ios弹窗插件css -->
    <link href="/static/music/css/alert.css" rel="stylesheet">


    <script src="/static/music/js/jquery.min.js"></script>
    <!-- 仿ios弹窗插件 -->
    <script src="/static/music/js/alert.js" type="text/javascript"></script>
    <!-- js原生触屏位置操作插件--Sition -->
    <script src="/static/music/js/sition.js" type="text/javascript"></script>

</head>

<body>
<!-- 网页背景 -->
<div id="scene" class="stars-wrapper">
    <div data-depth="0.00" class="layer"></div>
    <div data-depth="0.30" class="stars-cluster stars-cluster-1">
        <div class="star star-1"></div>
        <div class="star star-2"></div>
        <div class="star star-3"></div>
        <div class="star star-4"></div>
        <div class="star star-5"></div>
        <div class="star star-6"></div>
        <div class="star star-7"></div>
        <div class="star star-8"></div>
        <div class="star star-9"></div>
        <div class="star star-10"></div>
        <div class="star star-11"></div>
        <div class="star star-12"></div>
        <div class="star star-13"></div>
        <div class="star star-14"></div>
        <div class="star star-15"></div>
        <div class="star star-16"></div>
        <div class="star star-17"></div>
        <div class="star star-18"></div>
        <div class="star star-19"></div>
        <div class="star star-20"></div>
        <div class="star star-21"></div>
        <div class="star star-22"></div>
        <div class="star star-23"></div>
        <div class="star star-24"></div>
        <div class="star star-25"></div>
        <div class="star star-26"></div>
        <div class="star star-27"></div>
        <div class="star star-28"></div>
        <div class="star star-29"></div>
        <div class="star star-30"></div>
        <div class="star star-31"></div>
        <div class="star star-32"></div>
        <div class="star star-33"></div>
        <div class="star star-34"></div>
        <div class="star star-35"></div>
        <div class="star star-36"></div>
        <div class="star star-37"></div>
        <div class="star star-38"></div>
        <div class="star star-39"></div>
        <div class="star star-40"></div>
    </div>
    <div data-depth="0.50" class="stars-cluster stars-cluster-2">
        <div class="star star-1"></div>
        <div class="star star-2"></div>
        <div class="star star-3"></div>
        <div class="star star-4"></div>
        <div class="star star-5"></div>
        <div class="star star-6"></div>
        <div class="star star-7"></div>
        <div class="star star-8"></div>
        <div class="star star-9"></div>
        <div class="star star-10"></div>
        <div class="star star-11"></div>
        <div class="star star-12"></div>
        <div class="star star-13"></div>
        <div class="star star-14"></div>
        <div class="star star-15"></div>
        <div class="star star-16"></div>
        <div class="star star-17"></div>
        <div class="star star-18"></div>
        <div class="star star-19"></div>
        <div class="star star-20"></div>
        <div class="star star-21"></div>
        <div class="star star-22"></div>
        <div class="star star-23"></div>
        <div class="star star-24"></div>
        <div class="star star-25"></div>
        <div class="star star-26"></div>
        <div class="star star-27"></div>
        <div class="star star-28"></div>
        <div class="star star-29"></div>
        <div class="star star-30"></div>
        <div class="star star-31"></div>
        <div class="star star-32"></div>
        <div class="star star-33"></div>
        <div class="star star-34"></div>
        <div class="star star-35"></div>
        <div class="star star-36"></div>
        <div class="star star-37"></div>
        <div class="star star-38"></div>
        <div class="star star-39"></div>
        <div class="star star-40"></div>
    </div>
    <div data-depth="0.90" class="stars-cluster stars-cluster-3">
        <div class="star star-1"></div>
        <div class="star star-2"></div>
        <div class="star star-3"></div>
        <div class="star star-4"></div>
        <div class="star star-5"></div>
        <div class="star star-6"></div>
        <div class="star star-7"></div>
        <div class="star star-8"></div>
        <div class="star star-9"></div>
        <div class="star star-10"></div>
        <div class="star star-11"></div>
        <div class="star star-12"></div>
        <div class="star star-13"></div>
        <div class="star star-14"></div>
        <div class="star star-15"></div>
    </div>
</div>
<!-- 背景结束了 -->

<!-- 播放器部分 -->
<div class="fcmusic">
    <div class="items-group">
        <div class="item active">
            <div class="block" id="fcmusic">
                <span class="circleLight"></span>
                <div class="text">
              <span class="icon"><img src="/static/music/default.png" id="round_icon" class="round_icon play-tx">
              </span>
                    <span id="tools">
                        <i class="fa fa-backward play-left"></i>
                        <i class="fa fa"></i>
                        <i class="fa fa fa-play-circle play"></i>
                        <i class="fa fa"></i>
                        <i class="fa fa-forward play-right"></i>
                        <br><br>
                        <input type="range" name="PlayProgress" id="PlayProgress" value="0"
                               onchange="PlayProgress(this.value)">
                        <div>
                            <label style="float:left" id="beforeOne">00:00</label>
                            <label style="float:right" id="audioTime">00:00</label>
                        </div>
                    </span>
                    <p class="songtext"><b class="songname" id="lyctext">开启音乐之旅吧！</b></p>
                    <div class="scale_panel">
                        <div class="scale" id="progressBar">
                            <div></div>
                            <span id="progressBtn"></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<audio id="audio" style="width:0;height:0;display:none;">
    <!--<audio id="musicfc" style="width:0;height:0;display:none;" autoplay="autoplay" src="/tp/20230414\91cf16c624cd2286990c4affeae37305.mp3">-->
</audio>
<!-- 播放器部分 -->

<!-- 离子背景加载js -->
<script src="/static/music/js/loader.js"></script>

<!--json调用 音乐歌单歌词同步-->
<script>
    musicfc = $("#audio")[0];  //标签
    playStatus = 0;  //播放状态
    musicUrl = '';  //播放地址
    playHistory = [];  //历史记录

    $('.play').click(function () {
        //测试 随机获取信息
        if (musicUrl === '') {
            //获取歌曲信息
            getMusicInfo();
            musicfc.load();
        }


        if (playStatus === 0) {

            autoPlay();
        } else {
            stopPlay();
        }
    });

    //上点击
    // if (playStatus == 1) {
    //     autoPlay();
    // }
    $('.play-left').click(function () {
        prevMusic();

    });

    //下点击
    $('.play-right').click(function () {
        // nextMusic();
        getMusicInfo();
    });

    //开始播放
    function autoPlay() {
        playStatus = 1;  //修改播放状态
        musicfc.play();
        $(".play").attr("class", 'fa fa-stop-circle play');
        $('#round_icon').addClass('play-tx2');
    }

    //暂停播放
    function stopPlay() {
        playStatus = 0;
        musicfc.pause();
        $(".play").attr("class", 'fa fa-play-circle play');
        $('#round_icon').removeClass('play-tx2');
    }

    //随机获取歌曲
    function getMusicInfo() {
        $.ajax({
            type: 'post',
            url: '/getMusicInfo',
            success: function (res) {
                if (res.code === 0) {
                    attrMusic(res.data);
                    // arrMusicNum = arrMusic.length;
                } else {
                    alert('该项目已停止使用！');
                    return false;
                }
            },
            error: function () {
                alert('该项目已停止使用！');
                return false;
            }
        });
    }

    //播放信息渲染
    function attrMusic(arr) {
        if (arr && arr.hasOwnProperty('url')) {
            musicfc.src = arr.url.src;
            $('#audio').attr('autoplay', true);
            musicUrl = arr.url.path;
            playHistory.push(arr.id);
            if (arr.pic.src) {
                $('#round_icon').attr("src", arr.pic.src);
            }
            $('.songname').html(arr.title + '-' + arr.author);
        }
    }

    musicfc.ontimeupdate = function () {
        let currentTime = musicfc.currentTime,
            allTime = musicfc.duration,
            allTimeText = transTime(allTime),
            currentTimeText = transTime(currentTime);
        $('#beforeOne').html(currentTimeText);
        $('#audioTime').html(allTimeText);
        //进度条渲染
        $('.circleLight').css('background-color', 'hsla(' + Math.ceil(360 * Math.abs(currentTime / allTime)) + ',80%,50%,0.5)');
        var PlayProgress = Math.round(currentTime / allTime * 10000) / 100;

        console.log(PlayProgress);

        $('#PlayProgress').val(PlayProgress);
        $('#PlayProgress').css("background-size", PlayProgress + "% 100%");
    }


    //播放进度拖拽
    function PlayProgress(val) {
        if (allTime && val) {
            musicfc.currentTime = Math.round(allTime * val / 100);
            $('#PlayProgress').css("background-size", val + "% 100%");
        }
    }
    // //拖动
    // function cycle(loop) {
    //     if (loop == true) {
    //         musicfc.addEventListener("ended", autoPlay, false);
    //     } else {
    //         musicfc.removeEventListener("ended", autoPlay, false);
    //     }
    // }
    //转换音频时长显示
    function transTime(time) {
        let duration = parseInt(time),
            minute = parseInt(duration / 60),
            sec = duration % 60 + '',
            isM0 = ':';
        if (minute === 0) {
            minute = '00';
        } else if (minute < 10) {
            minute = '0' + minute;
        }
        if (sec.length === 1) {
            sec = '0' + sec;
        }
        return minute + isM0 + sec;
    }
</script>
<!--<script src="{:getVersionNumber('/static/music/js/music.js')}" type="text/javascript"></script>-->


</body>
</html>